<template>
<!-- gutter设置间距 -->
  <el-row :gutter="10">
<!--  span设置占多少分栏  -->
   <el-col :span="6">10</el-col>
   <el-col :span="6">10</el-col>
   <el-col :span="6">10</el-col>
   <el-col :span="6">10</el-col>
  </el-row>
  <h3>两张图</h3>
  <el-row :gutter="10">
   <el-col :span="12"><img src="a.png" style="width: 100%"></el-col>
   <el-col :span="12"><img src="a.png" style="width: 100%"></el-col>
  </el-row>
  <h3>六张图</h3>
  <el-row :gutter="10">
    <el-col :span="4" v-for="item in 6"><img src="a.png" style="width: 100%"></el-col>
  </el-row>
  <h3>列偏移</h3>
  <el-row :gutter="10">
   <el-col :offset="4" :span="20"><img src="a.png" style="width: 100%"></el-col>
  </el-row>
<!-- 练习1: 创建8等分 里面分别显示1, 2 ,3 ....8 -->
  <el-row :gutter="10">
   <el-col :span="3" v-for="item in 8">{{item}}</el-col>
  </el-row>
<!-- 练习2: 创建3部分 比例为 1:2:3 每个里面显示图片 间距20-->
  <el-row :gutter="20">
   <el-col :span="4"><img src="a.png" style="width: 100%"></el-col>
   <el-col :span="8"><img src="a.png" style="width: 100%"></el-col>
   <el-col :span="12"><img src="a.png" style="width: 100%"></el-col>
  </el-row>
<!-- 练习3: 创建一部分里面显示一张图片,宽度为屏幕的一半,并且居中 -->
  <el-row :gutter="10">
   <el-col :offset="6" :span="12"><img src="a.png" style="width: 100%"></el-col>
  </el-row>
  <h3>嵌套</h3>
  <el-row :gutter="10">
   <el-col :span="12">10</el-col>
   <el-col :span="12">
<!--   在每一个区域中都可以继续划分24分栏  -->
     <el-row :gutter="10">
      <el-col :span="6" v-for="item in 4">10</el-col>
     </el-row>
   </el-col>
  </el-row>

</template>

<script>
export default {
  name: "UView"
}
</script>

<style scoped>

</style>